<template>
    <div id="sceneView" class="relative"></div>
</template>

<script>
import geomapUtils from '@/utils/geomap-utils';
const dojoConfig = {
    async: true,
    deps: ['@dojo/framework/shim/main'],
    has: {
        'esri-promise-compatibility': 1, // Use native Promises by default
        'esri-featurelayer-webgl': 1, // Enable FeatureLayer WebGL capabilities
    },
    packages: [
        {
            location: '/libs/geomap',
            name: 'geomap',
        },
    ],
};
window.dojoConfig = dojoConfig;
window.dojoCss = 'https://js.arcgis.com/4.14/esri/themes/light/main.css';
window.dojoUrl = 'https://js.arcgis.com/4.14/';
export default {
    name: 'scene-view',
    data() {
        return {
            map: null,
            mapKey: Date.now() + '',
        };
    },
    created() {},
    mounted() {
        this.initScene();
    },
    methods: {
        initScene() {
            let viewerDef = geomapUtils.view.map3d.initSceneView(null, null, this.$el);
            viewerDef.then(viewer => {
                viewer.when(() => {
                    let mapUtils = new geomapUtils.layer.ViewerUtils(viewer);
                    mapUtils.addLayer(mapUtils, 'webTileLayer', {
                        layerName: 'testWebTileLayer',
                        urlTemplate:
                            'https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer/WMTS/?service=WMTS&request=GetTile&version=1.0.0&layer=World_Terrain_Base&styles=&tilematrixSet=Matrix_0&format=image/jpeg&height=256&width=256&style=default&minZoom=5&maxZoom=18&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}',
                    });
                    var data = [];
                    for (var i = 0; i < 2000; i++) {
                        data.push({
                            x: 120 + Math.random() * 2,
                            y: 30 + Math.random() * 2,
                            index: i,
                        });
                    }
                    mapUtils.addLayer(mapUtils, 'clusterLayer', {
                        layerName: 'testClusterLayer',
                        data: data,
                        id: 'flare-cluster-layer',
                        // /*聚类点位样式*/
                        // clusterRenderer: clusterRenderer,
                        // /*单个点位样式*/
                        // singleRenderer: singleRenderer,
                        // /*鼠标移入聚类点位，散开点位样式*/
                        // flareRenderer: flareRenderer,
                        /*鼠标移入聚类点位，散开点位面积样式*/
                        //areaRenderer: areaRenderer,
                        //clusterAreaDisplay: 'activated',
                        spatialReference: { wkid: 4326 },
                        subTypeFlareProperty: 'facilityType',
                        singleFlareTooltipProperty: 'x',
                        displaySubTypeFlares: true,
                        /*聚类点位最多可以散开的点位数*/
                        maxSingleFlareCount: 100,
                        maxFlareCount: 100,
                        /*地图级别大于这个值时，直接加载点位*/
                        clusterToLevel: 12,
                        /*聚类网格边长，单位：像素*/
                        clusterRatio: 75,
                        onClick: function (evt) {
                            //点位上单击响应事件
                            var data = evt.data;
                            var html = `<div>名称：${data.name}</div><div>经度：${data.x}</div><div>纬度：${data.y}</div>`;

                            evt.mapView.openInfoWindow(evt.getLocation(), {
                                protContent: html,
                                title: '企业点位',
                                //width: 500,
                                //height: 200
                            });
                        },
                        // callback: function() {}
                    });
                    mapUtils.addLayer(mapUtils, 'polygonLayer', {
                        layerName: 'testPolygonLayer2',
                        // extrudedHeight: 3000,
                        //height:1000,
                        data: [
                            {
                                name: '多边形2',
                                rings: [
                                    [
                                        [120.2, 30],
                                        [125.5, 30],
                                        [125.5, 35],
                                        [120.2, 35],
                                        [120.2, 30],
                                    ],
                                    [
                                        [110, 33],
                                        [115, 33],
                                        [115, 35],
                                        [110, 35],
                                        [110, 33],
                                    ],
                                ],
                                symbol: {
                                    type: 'simple-fill',
                                    color: [51, 51, 204, 0.9],
                                    style: 'solid',
                                    outline: {
                                        color: 'red',
                                        width: 1,
                                    },
                                },
                            },
                        ],
                    });
                    mapUtils.addLayer(mapUtils, 'polylineLayer', {
                        layerName: 'testPolylineLayer2',
                        data: [
                            {
                                name: '线1',
                                paths: [
                                    [
                                        [115.2, 31.5],
                                        [116, 31.5],
                                        [118, 31.5],
                                        [119, 31.5],
                                    ],
                                ],
                            },
                            {
                                name: '线2',
                                paths: [
                                    [
                                        [121.2, 32.1],
                                        [122.5, 32.2],
                                        [124.7, 32.5],
                                    ],
                                ],
                            },
                            {
                                name: '线3',
                                paths: [
                                    [
                                        [120.2, 33.1],
                                        [121.5, 33.2],
                                        [122.7, 33.5],
                                    ],
                                ],
                                symbol: {
                                    type: 'simple-line',
                                    color: [4, 90, 141],
                                    width: 4,
                                    cap: 'round',
                                    join: 'round',
                                },
                            },
                        ],
                    });
                    mapUtils.addLayer(mapUtils, 'pointLayer', {
                        layerName: 'testPointLayer2',
                        data: [
                            {
                                x: 113.785661,
                                y: 22.75723,
                                name: '测试点名称',
                            },
                            { x: 121.8, y: 30, name: '测试点2' },
                            { x: 121.5, y: 32, name: '测试点3' },
                        ],
                    });
                });
            });
        },
        initMapview() {
            let viewerDef = geomapUtils.view.map2d.initMapView(null, null, this.$el);

            viewerDef.then(viewer => {
                viewer.when(() => {
                    // viewer.container.style.cursor = 'crosshair';
                    console.log(geomapUtils, viewer);
                    let mapUtils = new geomapUtils.layer.ViewerUtils(viewer);
                    mapUtils.addLayer(mapUtils, 'webTileLayer', {
                        layerName: 'testWebTileLayer',
                        urlTemplate:
                            'https://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer/WMTS/?service=WMTS&request=GetTile&version=1.0.0&layer=World_Terrain_Base&styles=&tilematrixSet=Matrix_0&format=image/jpeg&height=256&width=256&style=default&minZoom=5&maxZoom=18&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}',
                    });
                    mapUtils.addLayer(mapUtils, 'polygonLayer', {
                        layerName: 'testPolygonLayer2',
                        // extrudedHeight: 3000,
                        //height:1000,
                        data: [
                            {
                                name: '多边形2',
                                rings: [
                                    [
                                        [120.2, 30],
                                        [125.5, 30],
                                        [125.5, 35],
                                        [120.2, 35],
                                        [120.2, 30],
                                    ],
                                    [
                                        [110, 33],
                                        [115, 33],
                                        [115, 35],
                                        [110, 35],
                                        [110, 33],
                                    ],
                                ],
                            },
                        ],
                    });
                    mapUtils.addLayer(mapUtils, 'polylineLayer', {
                        layerName: 'testPolylineLayer2',
                        data: [
                            {
                                name: '线1',
                                paths: [
                                    [
                                        [115.2, 31.5],
                                        [116, 31.5],
                                        [118, 31.5],
                                        [119, 31.5],
                                    ],
                                ],
                            },
                            {
                                name: '线2',
                                paths: [
                                    [
                                        [121.2, 32.1],
                                        [122.5, 32.2],
                                        [124.7, 32.5],
                                    ],
                                ],
                            },
                            {
                                name: '线3',
                                paths: [
                                    [
                                        [120.2, 33.1],
                                        [121.5, 33.2],
                                        [122.7, 33.5],
                                    ],
                                ],
                            },
                        ],
                    });
                    mapUtils.addLayer(mapUtils, 'pointLayer', {
                        layerName: 'testPointLayer2',
                        data: [
                            {
                                x: 113.785661,
                                y: 22.75723,
                                name: '测试点名称',
                            },
                            { x: 121.8, y: 30, name: '测试点2' },
                            { x: 121.5, y: 32, name: '测试点3' },
                        ],
                    });
                    // fetch('/data/heatData.json')
                    //     .then(response => {
                    //         if (!response.ok) {
                    //             throw new Error('Network response was not ok');
                    //         }
                    //         return response.text(); // 返回一个 Promise，解析为响应的文本内容
                    //     })
                    //     .then(data => {
                    //         data = JSON.parse(data);
                    //         /*热力图的展示关键是数据源，只需要传经度，纬度，相同经纬度出现的次数，这三个字段即可*/
                    //         mapUtils.addLayer(mapUtils, 'heatMapLayer', {
                    //             layerName: 'testHeatMapLayer',
                    //             lngFieldName: 'longitude',
                    //             latFieldName: 'latitude',
                    //             countFieldName: 'count',
                    //             data: data,
                    //             //minScale: 10000000,//设置热力图最小显示比例尺
                    //             options: {
                    //                 isShowLegend: true, //控制图例显示，默认值是false
                    //                 opacity: 0.7, //控制图层透明度，默认值是0.8
                    //                 gradient: {
                    //                     /*不支持单个设置透明度的写法，写成"rgba(0,0,255,0.5)"与"rgb(0,0,255)"效果一样*/
                    //                     0.25: 'rgb(0,0,255)',
                    //                     0.55: 'rgb(0,255,0)',
                    //                     0.85: 'rgb(255,255,0)',
                    //                     1.0: 'rgb(255,0,0)',
                    //                 },
                    //                 legendOptions: {
                    //                     style: {}, //可以控制容器的背景色、字体、宽度等属性
                    //                     canvasHeight: 100, // 图例渐变色高度,默认值是120
                    //                     canvasWidth: 20, // 图例渐变色宽度，默认值是20
                    //                 },
                    //                 radius: 25, //阴影半径
                    //             },
                    //             callback: function () {},
                    //         });
                    //     })
                    //     .catch(error => {
                    //         console.error('There was a problem with the fetch operation:', error);
                    //     });
                });
            });
        },
    },
};
</script>
<style lang="less">
#sceneView {
    height: 100%;
    width: 100%;
}
</style>
